<template>
  <div class="home">
    我是首页
		<button @click="handleBtnClick">打开弹框</button>
		<zdialog @handleClose="hahaha" v-model="dialogVisible" >
			<template #body>
			</template>
		</zdialog>
		<button @click="handleClickDrawer">打开抽屉</button>
		<zdrawer @handleClose="drawer" title="新建抽屉" v-model="showDrawer">
			<template #body>
					<component :is="showWidget(item.type)" class="test" v-for="item in inputs" :key="item.name" :struc="item" />
			</template>
		</zdrawer>
		</div>
		<el-table v-if="false" :data="tableData" border style="width: 100%" @header-dragend="handleHeaderDragend">
		<template v-for="item in columns">
      <el-table-column
        v-if="item.show"
        show-overflow-tooltip
        :prop="item.prop"
        :sortable="item.sortable"
        :label="item.label"
        :width="item.width"
        :key="item.prop"
        :resizable="item.resizable"
      >
        <template #default="scope">
          <!-- <span v-if="item.prop === 'clue_type'">{{ scope.row[item.prop] | clueType }}</span>
          <span v-else-if="item.prop === 'clue_source'">{{ scope.row[item.prop] | clueSource }}</span>
          <span v-else-if="item.prop === 'contact_type'">{{ scope.row[item.prop] | commonType }}</span>
          <span v-else-if="item.prop === 'company_name'" class="link">{{ scope.row[item.prop] }}</span> -->
          <span >{{ scope.row[item.prop] }}</span>
        </template>
      </el-table-column>
    </template>
			<!-- <el-table-column prop="date" label="Date" :width="widthColumn"
				class="hhcolumn"
				@mousedown="handleMousedown"
				@mousemove="handleMousemove"
				@mouseleave="handleMouseleave"
				/> -->
			<el-table-column prop="name" label="Name" width="180" />
			<el-table-column prop="address" label="Address" />
		</el-table>

		<printHtml id="print-js" :printList='printList'></printHtml>

		<button @click="handlePrint">打印</button>
		<button @click="handlePrint1">打印充值单</button>

		<h3>测试牙位</h3>
		<div style="display: flex">
			<znumtooth
			:lTToolist ="Tleft"
			:rTToolist ="Tright"
			:lBToolist ="Bleft"
			:rBToolist ="Bright"
			></znumtooth>
			<div style="flex: 1; background-color: red;"></div>
		</div>

		<printMedicalVue id="print-medical" :datas="recordLists" :arr="arrList"></printMedicalVue>
		<PrintRechargeSheet id="print-recharge"></PrintRechargeSheet>
		

</template>

<script lang="ts">
import { computed, defineComponent, onMounted, reactive, ref, nextTick, toRefs } from "vue";
import useUser from "../hook/user";
import ztable, { BtnData } from "../components/Table/index.vue";
import zpage from "../components/pagination/pagination.vue";
import zborder1 from "../components/styleBorder/border1.vue";
import zrecords from "../components/styleBorder/records.vue";
import zdateIcon from "../components/styleBorder/dateIcon.vue";
import zpersonInfo from "../components/styleBorder/personInfo.vue";
import zmemberInfo from "../components/styleBorder/memberInfo.vue";
import zdialog from "../components/dialog/dialog.vue";
import zdrawer from "../components/drawer/drawer.vue";
import ztooth from "../components/tooch/imgTooth.vue";
import znumtooth from "../components/tooch/numTooth.vue";

import { DataStruc } from "../hook/datastruc";

import ztitleBorder from "../components/titleBorder/titleBorder.vue"

import useShowWidget from "../components/widget/usechoose";
import { getFullToothData, ToothList } from ".././usefn/getToothData"

import { useRouter, useRoute } from 'vue-router'

import showTooth from '../components/tooch/showTooth.vue'
import printHtml from '../components/printHtml/printHtml.vue'
import printMedicalVue from '../components/printHtml/printMedical.vue';
import PrintRechargeSheet from '../components/printHtml/printRechargeSheet.vue'
import printJS from 'print-js';
import usePromiseRequest from "../hook/request"

import useRequet, { RespData } from "../hook/network"
import { ElMessage, ElMessageBox } from 'element-plus'
// import a from '../../public'

export default defineComponent({
	name: "Home",
	components: {
		ztable,
		zpage,
		zborder1,
		zrecords,
		zdateIcon,
		zpersonInfo,
		zmemberInfo,
		zdialog,
		zdrawer,
		ztitleBorder,
		ztooth,
		znumtooth,

		showTooth,
		printHtml,
		printMedicalVue,
		PrintRechargeSheet
	},

	setup: () => {
		const router = useRouter();
		const user = useUser();
		const request = useRequet({ path: "" });

		const list:any= getFullToothData()
		console.log(list)
		const data = reactive({
			Bleft: list.Bleft,
			Bright: list.Bright,
			Tleft: list.Tleft,
			Tright: list.Tright
		})
		const recordLists = ref([] as any)
		const arrList = ref([] as any)
		const temList = [
      {
        title:'主诉',
        content:'',
        list: []
      },
      {
        title:'现病史',
        content:'',
        list: []
      },
      {
        title:'既往史',
        content:'',
        list: []
      },
      {
        title:'口腔检查',
        content:'',
        list: []
      },
      {
        title:'辅助检查',
        content:'',
        list: []
      },
      {
        title:'诊断',
        content:'',
        list: []
      },
      {
        title:'治疗计划',
        content:'',
        list: []
      },
      {
        title:'处置',
        content:'',
        list: []
      },
      {
        title:'医嘱',
        content:'',
        list: []
      },

    ]
		const getList = () => {
      list.loading = true
      request.sendRequest({
        address: 'sick/history/getMedicalHistoryList',
        params: {
          customerId: Number(67127)
        },
        success: (resp: RespData) => {
          if(resp.code !== 0) return ElMessage.error(resp.msg || '获取信息失败')
          console.log(resp.data)
          recordLists.value = resp.data
          console.log(recordLists.value)
            arrList.value = []
            recordLists.value.forEach((item: any) => {
              
              item.isActive = true
              let obj = JSON.parse(item.other)
              let list = JSON.parse(JSON.stringify(temList))

                Object.keys(obj).forEach(key => {
                  let idx = list.findIndex((item: any) => {
                      return item.title === key
                    })
                    if(idx > -1) {
                      if(Object.prototype.toString.call(obj[key]) === '[object Object]') {
                        return
                      } else if (Object.prototype.toString.call(obj[key]) === '[object Boolean]') {
                        return
                      } else if (Object.prototype.toString.call(obj[key]) === '[object Array]') {
                        list[idx].content = obj[key][0].val
                        list[idx].list = obj[key]
                      }
                      else {
                        list[idx].content = obj[key]
                      }
                      
                    }
                })
              
              arrList.value.push(list)
          })
            console.log(arrList.value)
            if(recordLists.value.length > 0) {
              recordLists.value[0].isActive = false
            }

            list.loading = false
        },
        fail: (resp: RespData) => {
          if(resp.code !== 0) return ElMessage.error(resp.msg)
          list.loading = false
        },
        method: "POST",
      }) 
    }

		getList()

		const showWidget = useShowWidget;

		// const columns = [
		// 	{
		// 		name: "orderTime",
		// 		viewName: "时间",
		// 		type: 401,
		// 		dataSource: "/abc/dab",
		// 		hint: "提示",
		// 		defaultValue: "23",
		// 		length: null,
		// 		minvalue: null,
		// 		maxValue: null,
		// 		rangx: null,
		// 		must: true,
		// 		errorHit: "错误提示",
		// 		value: null,
		// 		listView: 1,
		// 		//列表时是否显示
		// 		canUpdate: 0,
		// 		//指明在修改时是否允许修改。修改时显示依然由canShow指明是否显示
		// 		insertShow: 1,
		// 		//指明增加的时候是否显示
		// 		canShow: 1, //这个指明在显示明细的时候是否显示
		// 		fixed: null, //当前列是否固定
		// 		options:[{}]
		// 	},
		// 		{
		// 		name: "type",
		// 		viewName: "类型",
		// 		type: 401,
		// 		dataSource: "/abc/dab",
		// 		hint: "提示",
		// 		defaultValue: "23",
		// 		length: null,
		// 		minvalue: null,
		// 		maxValue: null,
		// 		rangx: null,
		// 		must: true,
		// 		errorHit: "错误提示",
		// 		value: null,
		// 		listView: 1,
		// 		//列表时是否显示
		// 		canUpdate: 0,
		// 		//指明在修改时是否允许修改。修改时显示依然由canShow指明是否显示
		// 		insertShow: 1,
		// 		//指明增加的时候是否显示
		// 		canShow: 1, //这个指明在显示明细的时候是否显示
		// 		fixed: null, //当前列是否固定
		// 		options:[{}]
		// 	},
		// ] as any[];
		let columns = ref([
      {
        prop: 'name', // 对应列内容的字段名
        label: '姓名', // 显示的标题
        width: 66, // 对应列的宽度
        resizable: true, // 对应列是否可以通过拖动改变宽度（需要在 el-table 上设置 border 属性为真）
        show: true, // 展示与隐藏
        sortable: false // 对应列是否可以排序
      },
      {
        prop: 'address',
        label: '地址',
        width: 78,
        resizable: true,
        show: true,
        sortable: false
      },
      // ... 省略部分字段
    ])

    const inputs = [
			{
           id: 529,
            name: "nameResource",
            viewName: "病历号",
            type: 106,
            groupId: 501,
            dataSource: "",
            hint: null,
            defaultValue: null,
            length: null,
            minValue: null,
            maxValue: null,
            rangx: null,
            must: 1,
            errorHit: "请选择",
            value: "1111111",
            orderNum: 1,
            show: 1,
            canUpdate: 1,
            companyId: 1,
            listView: 1,
            insertShow: 1,
            canShow: 1,
            fixed: null,
            idName: null
        },{
           id: 529,
            name: "phone",
            viewName: "手机",
            type: 107,
            groupId: 501,
            dataSource: "customer/info/getCustomerMobileType",
            hint: null,
            defaultValue: null,
            length: 11,
            minValue: null,
            maxValue: null,
            rangx: null,
            must: 1,
            errorHit: "",
            value: [],
            orderNum: 1,
            show: 1,
            canUpdate: 1,
            companyId: 1,
            listView: 1,
            insertShow: 1,
            canShow: 1,
            fixed: null,
            idName: null
        },
    ];

		const printList = ref<any[]>([])

		// 测试打印
		const handlePrint = async() => {
			// let list:any = await usePromiseRequest(`pay/order/testPrint`, {}, 'GET')
			// console.log(list)
			// printList.value = list.data
			// console.log("handlePrint")

			// await nextTick()
			// printJS({
			// 	printable: 'print-js',
			// 	type: 'html',
			// 	scanStyles: false,
			// 	css: 'public/print.css'
			// })

			printJS({
				printable: 'print-medical',
				type: 'html',
				scanStyles: false,
				css: 'public/print-medical.css'
			})
		}

		const handlePrint1 = () => {
			printJS({
				printable: 'print-recharge',
				type: 'html',
				scanStyles: false,
				css: 'public/print-recharge.css'
			})
		}




		const btnData: BtnData[] = [
		
		]

		let dialogVisible = ref(false)
		const handleBtnClick = () => {
			console.log('点击立')
			dialogVisible.value = true
		}
		const hahaha = (val:boolean) => {
			console.log(val, 'hahah')
			dialogVisible.value = val
		}
		let showDrawer = ref(false)
		const handleClickDrawer = () => {
			showDrawer.value = true
		}
		const drawer = (val:boolean) => {
			showDrawer.value = val
		}
		const currentPage = ref(1)
		const select = (val:object) => {
			console.log('我在父组件', JSON.parse(JSON.stringify(val)))
		}
		const expandChange = (row:object, expandedRows:any) => {
			console.log('我是父组件', row, expandedRows)
		}
		const handleSizeChange = (val: number) => {
			console.log('handleSizeChange', val)
		}
		const handleCurrentChange = (val: number) => {
			currentPage.value = val
			console.log('handleCurrentChange', val)
		}
		const handleAdd = () => {
			console.log('点击了')
		}
		const nihao = ref(null)
		const btn = document.querySelector('#nihao')


		const dragstart = (e: MouseEvent) => {
			console.log('dragstart按下移动执行', e.offsetX, e.offsetY)
			console.log(btn)
		}

		const dragenter = (e: Event) => {
			console.log('dragenter按下', e)
		}
		const dragend = (e:MouseEvent) => {
			console.log('dragend结束', e.clientX, e.clientY)
		}
		const dragleave = (e:Event) => {
			console.log('dragleave进入离开都触发', e)
		}

		const tableData = [
        {
          date: '2016-05-03',
          name: 'Tom',

          address: 'No. 189, Grove St, Los Angeles',
        },
        {
          date: '2016-05-02',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles',
        },
        {
          date: '2016-05-04',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles',
        },
        {
          date: '2016-05-01',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles',
        },
      ]

		const initColumn = () => {
			let data = window.localStorage.getItem('column') || null
			console.log(data)
			if(data) {
				columns.value = JSON.parse(data)
			}
		}
		initColumn()
		const saveTableColumns = () => {
			window.localStorage.setItem('column', JSON.stringify(columns.value))
		}
		const widthColumn = ref('')
		const colVal = ref(null)
		const handleHeaderDragend = (newWidth: number, oldWidth:number, column:any, event:any) => {
			columns.value = columns.value.map(i => {
				if(i.prop === column.property) {
					i.width = newWidth
				}
				return i
			})
			saveTableColumns()
			console.log(newWidth, oldWidth, column, event)
		}
		
		const handleMousedown = () => {
			console.log('handleMousedown')
		}

		const handleMousemove = () => {
			console.log('handleMousemove')
		}

		const handleMouseleave = () => {
			console.log('handleMouseleave')
		}
		return {
			...toRefs(data),
			user,
			columns,
			select,
			btnData,
			expandChange,
			handleSizeChange,
			handleCurrentChange,
			currentPage,
			handleBtnClick,
			hahaha,
			dialogVisible,
			// btnData1,
			handleAdd,
			showDrawer,
			handleClickDrawer,
			drawer,
			showWidget,
			inputs,
			dragstart,
			dragenter,
			dragend,
			dragleave,
			nihao,
			handlePrint,
			handlePrint1,
			printList,

			tableData,
			handleHeaderDragend,
			widthColumn,
			handleMousedown,
			handleMousemove,
			handleMouseleave,


			recordLists,
			arrList
			};
	},
	methods: {
		onClickRowButton(event: MouseEvent) {
			console.warn("user:", this.user);
		},
	},
});
</script>

<style lang="scss" scoped>
.and {
	display: flex;
	justify-content: space-between;
}
.test-1 {
	display: flex;
	flex-wrap: wrap;
}

.title-border {
	width: 100%;
	.title {
		border-top: 1px solid red;
		width: 100%;
		height: 60px;
		line-height: 60px;
		font-weight: 600;
		font-size: 16px;
	}
}

.test-red {
	width: 100px;
	height: 100px;
	border: 2px solid red;
	margin-top: 20px;
}



</style>
